<template>
    <div class="table">
        <div class="content-common">
           <el-row type="flex" class="row-bg" justify="space-between" style="padding-bottom:20px">
				<el-col :span="6"><el-button type="primary"  @click="prepage()">返回</el-button></el-col>
				<el-col :span="6" style="text-align:right">
					<!-- <el-button type="primary" icon="plus" @click="handleAdd()">新增</el-button> -->
<!-- 					<el-button  type="primary" icon="plus" @click="handleAdd()">新增</el-button>
 -->					
					
					<el-button  type="primary" icon="download" @click="downexcell">导出记录</el-button>
				</el-col>
           </el-row>
         
		   <div style="font-size:18px;text-align:center;font-weight:bold;padding-bottom:8px">
			{{topInfo.stnm}}站径流小区土壤水分(TDR法)计算表
		   </div>
		  <div>

			
			      
			<span style="margin-right:12px">观测日期: <span style="color:red">{{topInfo.obDate}}</span>  </span>
			
			
			<span style="margin-right:12px">计算人:<span style="color:red">{{topInfo.calculatorName}}</span></span>
			<span>审核人:<span style="color:red">{{topInfo.reviewerName}}</span></span>
		  </div>


			<el-table
			   :data="tableData"
			   border
			                  
			   class="table-common"
			                 
			   header-cell-class-name="table-header"
				>
				
				<el-table-column
				  prop="areaCode"
				  width="70"
				  label="小区号">
				</el-table-column>
			    <el-table-column
			      prop="frequency"
				   width="70"
			      label="测次"
			      >
			    </el-table-column>
			    <el-table-column
			      prop="point"
				   width="70"
			      label="测点"
			      >
				  <template #default="scope">
				      <span v-show="scope.row.point==1">坡上</span>
				      <span v-show="scope.row.point==2">坡中</span>
				      <span v-show="scope.row.point==3">坡下</span>
				  	
				  </template>
				 
			    </el-table-column>
				<el-table-column
				  prop="measuringDepth"
				  label="测量深度(cm)"
				  >
				</el-table-column>
			    <el-table-column
			      prop="soilMoisture1"
			      label="土壤水分1(%)">
			    </el-table-column>
				<el-table-column
				  prop="soilMoisture2"
				  label="土壤水分2(%)">
				</el-table-column>
				<el-table-column
				  prop="soilMoisture3"
				  label="土壤水分3(%)">
				</el-table-column>
				<el-table-column
				  prop="avgMoisture"
				  label="小区平均水分(%)">
				</el-table-column>
				<el-table-column
				  prop="remark"
				  label="备注">
				</el-table-column>
				<!-- <el-table-column label="操作" width="180" align="center" v-if="status==0">
				    <template #default="scope">
				        <el-button type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
				        <el-button type="danger"  @click="handleDelete(scope.row)"
				            >删除</el-button
				        >
						
				    </template>
				</el-table-column> -->
			  </el-table>

        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="logTitle" v-model="editVisible" width="990px">
       
		   
		   <el-form :label-position="'right'" :inline="true">
		             
		   		 
		 
		       
		   </el-form>
		   			<el-table
		   			   :data="cijiangyuData"
		   			   border
		   			                  
		   			   class="table-common"
		   			                 
		   			   header-cell-class-name="table-header"
		   				>
		   				
		   				<el-table-column
		   				  prop="areaCode"
						
		   				  label="小区号">
		   				</el-table-column>
		   			    <el-table-column
		   			      prop="frequency"
		   			      label="测次"
		   			      >
		   			    </el-table-column>
		   			    <el-table-column
		   			      prop="point"
		   			      label="测点"
		   			      >
		   			    </el-table-column>
		   				<el-table-column
		   				  prop="measuringDepth"
		   				  label="测量深度(cm)"
		   				  >
		   				</el-table-column>
		   			    <el-table-column
		   			      prop="soilMoisture1"
		   			      label="土壤水分1(%)">
		   			    </el-table-column>
		   				<el-table-column
		   				  prop="soilMoisture2"
		   				  label="土壤水分2(%)">
		   				</el-table-column>
		   				<el-table-column
		   				  prop="soilMoisture3"
		   				  label="土壤水分3(%)">
		   				</el-table-column>
		   				<el-table-column
		   				  prop="avgMoisture"
		   				  label="小区平均水分(%)">
		   				</el-table-column>
		   				<el-table-column
		   				  prop="remark"
		   				  label="备注">
						  <template #default="scope">
						     <el-input v-model="scope.row.remark" placeholder=""></el-input>
						  	
						  </template>
		   				</el-table-column>
		   				
		   			  </el-table>

						<template #footer>
							<span  class="dialog-footer">
              
								<el-button type="primary" @click="saveEdit">确 定</el-button>
							</span>
    					</template>
          
        </el-dialog>
    </div>
</template>

<script>

	
import { calculatesoilMoisturesaveaddTdrDetail,calculatesoilMoistureviewselectTdrRecord,calculaterainfallsaveaddDetail,calculaterainfallviewselectProRainfall
,reportfieldManageeditdoApprove,reportfieldManageeditsubmitRecord,rainfallImportRainfallDaily,calculatesoilMoistureviewlistTdrDetail,
calculatesoilMoistureremovedelTdrDetail } from '../../../api/index';
import moment from 'moment'
export default {
    name: 'jisuanturangtrdmingxi',
    data() {
        return {
			topInfo:{},
			status:'/',
			AllData:[],
			cijiangyuData:[],
			shenpilog:false,
			globalUser:[],
			page:{
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0
			},
            query: {
                
            },
			excelllog:false,
            formInline: {},
            tableData: [],
           
            editVisible: false,
            logTitle: '',
            pageTotal: 0,
            form: {
               
            },
			stationData:[],
			seldata:[],
			checkArr:[],
			tijiaoform:{
				
			},
			selnow:null,
			jiangyuguochengData:[]
        };
    },
    created() {
		this.topInfo={
			obDate:moment(this.$route.query.obDate).format("YYYY年M月D日"),
			stnm:this.$route.query.stnm,
			extractorName:this.$route.query.extractorName,
			calculatorName:this.$route.query.calculatorName,
			reviewerName:this.$route.query.reviewerName
		}
		this.status=this.$route.query.status
		this.globalUser=globalUser
        let that = this;
        //that.getData();
		this.getJisuanData()
		
    },
    methods: {
		downexcell(){
			
			let stcd=this.$route.query.stcd
			window.location.href=globalVar.jingliujiangyuUrl+'/soilWater/runoffField/calculate/soilMoisture/export/exportTdrData?year='+globalyear+'&stcd='+stcd
		},
		prepage(){
			this.$router.go(-1);
		},
		getJisuanData(){
			let that=this
			calculatesoilMoistureviewselectTdrRecord({
				stcd:that.$route.query.stcd,
				obDate:that.$route.query.obDate
			}).then(e=>{
				
				that.AllData=e.object.map(item=>{
					//item.avgMoisture=((Number(item.soilMoisture1)+Number(item.soilMoisture2)+Number(item.soilMoisture3))/3).toFixed(2)
					 item.headNo=that.$route.query.recordNo
					return item
				})
				that.handleAdd()
			}).catch(err=>{
				console.log(err)
			})
		},
		tianjiamingxi(){
			//calculaterainfallsaveaddDetail
			let that=this
			calculaterainfallsaveaddDetail(that.jiangyuguochengData).then(e=>{
				that.shenpilog=false
				
			}).catch(e=>{
				console.log(err)
			})
		},

		handleSelectionChange(val) {
			this.seldata=val
			//this.getJiangyuguocheng(val)
		},
		

		quedingtijiao(){
			this.tijiaoform.relatedNo=this.selnow.recordNo
			let that=this
			console.log(that.cijiangyuData)
			return
			reportfieldManageeditdoApprove(that.cijiangyuData).then(e=>{
				that.$message.success('操作成功');
				that.shenpilog=false
			}).catch(e=>{
				console.log(err)
			})
		},
		shenpi(item){
			this.shenpilog=true
			this.selnow=item
			
		},

		daorujiangyu(){
			let that=this
			rainfallImportRainfallDaily(that.form).then(e=>{
				console.log(e)
			}).catch(err=>{
				console.log(err)
			})
		},
      
        getData() {
			let data={
				headNo:this.$route.query.recordNo,
				

			}
			let that=this
            calculatesoilMoistureviewlistTdrDetail(data).then((e) => {
				
				
              
               
               that.tableData=e.object
                
               
                
            });
        },
        // 触发搜索按钮
        handleSearch() {
           
            this.getData();
        },
        // 删除操作
        handleDelete(row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    calculatesoilMoistureremovedelTdrDetail([row.detailNo] ).then((e) => {
                        this.$message.success('删除成功');
                        this.getData();
                    });
                })
                .catch(() => {});
        },

        tijiao(row){
			
			this.$confirm('确定提交吗？', '提示', {
			    type: 'warning'
			})
			    .then(() => {
					
					
					reportfieldManageeditsubmitRecord({
						headNo:row.recordNo
					}).then(e=>{
						
						this.getData();
					}).catch(err=>{
						console.log(err)
					})
			       
			    })
			    .catch(() => {});
			
		},
        // 编辑操作
        handleEdit(row) {
           
            this.cijiangyuData=JSON.parse(JSON.stringify([row]))
            this.logTitle = '土壤水分tdr法记录明细';
           
            this.editVisible = true;
        },
        handleAdd() {
			this.cijiangyuData=JSON.parse(JSON.stringify(this.AllData))
            this.logTitle = '土壤水分tdr法记录明细';
            this.form = {
               headNo:this.$route.query.recordNo
            };
            //this.editVisible = true;
			this.saveEdit()
        },
        // 保存编辑
        saveEdit() {
			let that=this
			let data=[]
			this.form.avgMoisture=(Number(this.form.soilMoisture1)+Number(this.form.soilMoisture2)+Number(this.form.soilMoisture3))/3
              
                calculatesoilMoisturesaveaddTdrDetail(that.cijiangyuData).then((e) => {
                    this.editVisible = false;
                    //this.$message.success('操作成功');
                    this.getData();
                });
            
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}



 table{  line-height:25px;}
	    th{ border:1px solid #fff;background:#3f8cff ;color:#fff}
	    td{  text-align:center;border:1px solid #ebeef5} 
	    tr:hover{ background-color:#f5f7fa}
</style>

